<#--FORM-->
<template>
  <div>
    <!-- 单一根，指令才能生效，必须 v-modaldrag --->
<#assign rowOpen=false formColumnCount=(form.formColumnCount!1) colIndex=0><#-- 仅支持1列和2列-->
    <el-form :model="${table.beanName}" ref="${table.beanName}Form" :rules="rules" :label-width="100" size="medium">
<#list formFields as column>
  <#if rowOpen==true><#-- a-row标签还未结束 -->
    <#if column.newRow==true || column.colSpan gt 1><#-- 强制新起一行 或者 此form field独占一行 -->
        </el-row>
        <#assign rowOpen=false>
    </#if>
  </#if>
  <#if rowOpen==false><#-- 新的一行 -->
      <el-row :gutter="formGutter">
        <#assign rowOpen=true colIndex=0>
  </#if>
  <#assign colIndex=colIndex+(column.colSpan!0)>
  <#assign elColSpan=12 >
  <#if formColumnCount==1 || (column.colSpan!0) gt 1> <#-- 表单只有一列，或者此输入框占多列 -->
    <#assign elColSpan=24>
  </#if>

  <#assign elStyle=':style="{width:elWidth1}"'>
  <#if (column.colSpan!0) gt 1>
    <#assign elStyle=''>
  </#if>
        <el-col :span="${elColSpan}">
          <el-form-item label="${column.columnCaption!''}" prop="${column.varName!''}"><#rt>
  <#if (column.codeType!'')?length gt 0 || (column.formElementType!'') == "2"><#-- SELECT 下拉框 -->          
          <#lt><el-select v-model="${table.beanName}.${column.varName}" <#if (column.required!false) == false>:clearable="true"</#if> ${elStyle}><#rt>
          <#lt><el-option v-for="item in ${column.varName}Items" :key="item.value" :label="item.label" :value="item.value"></el-option><#rt>
          <#lt></el-select><#rt>
  <#elseif (column.formElementType!'') == "5"><#-- PERCENT_INPUT 百分比 -->
          <#lt><el-slider v-model="${table.beanName}.${column.varName}" :step="5" /><#rt>
  <#elseif (column.formElementType!'') == "6"><#-- ONE_IMAGE 单个图片 -->
          <#lt><#rt>
  <#elseif (column.formElementType!'') == "7"><#-- MULTI_IMAGES 多个图片 -->
          <#lt><#rt>
  <#elseif (column.formElementType!'') == "8"><#-- ONE_FILE 单个附件 -->
          <#lt><#rt>
  <#elseif (column.formElementType!'') == "9"><#-- MULTI_FILES 多个附件 -->
          <#lt><#rt>
  <#elseif (column.formElementType!'') == "10"><#-- MULTI_LINE_TEXT -->
          <#lt><el-input type="textarea" v-model="${table.beanName}.${column.varName}" :rows="3" /><#rt>
  <#elseif (column.formElementType!'') == "13"><#-- TIME -->
          <#lt><el-time-picker v-model="${table.beanName}.${column.varName}" format="HH:mm" placeholder="时间"/><#rt>
    <#elseif (column.formElementType!'') == "15"><#-- RADIOS 单选按钮组 -->
          <#lt><el-radio-group v-model="${table.beanName}.${column.varName}" size="medium"><#rt>
          <#lt><el-radio-button v-for="item in ${column.varName}Items" :key="item.value" :label="item.value">{{item.label}}</el-radio-button><#rt>
          <#lt>/el-radio-group><#rt>
  <#elseif column.javaType == 'Boolean' || (column.formElementType!'') == "16"><#-- CHECKBOX 单个勾选框 -->
          <#lt><el-checkbox v-model="${table.beanName}.${column.varName}"></el-checkbox><#rt>
  <#elseif (column.formElementType!'') == "17"><#-- CHECKBOXES 多个勾选框 -->
          <#lt><#rt>
  <#elseif (column.formElementType!'') == "18"><#-- COLOR_PALETTE 颜色框 -->
          <#lt><el-color-picker v-model="${table.beanName}.${column.varName}" /><#rt>
  <#elseif (column.formElementType!'') == "19"><#-- Switch 开关 -->
          <#lt><el-switch v-model="${table.beanName}.${column.varName}" active-text="开" inactive-text="关" /><#rt>
  <#elseif (column.formElementType!'') == "20"><#-- 树形下拉框 -->
          <#lt><#rt>
  <#elseif (column.formElementType!'') == "21"><#-- 评分 -->
          <#lt><el-rate v-model="${table.beanName}.${column.varName}" allow-half /><#rt>
  <#elseif (column.formElementType!'') == "22"><#-- 级联选择 -->
          <#lt><el-cascader v-model="${table.beanName}.${column.varName}" ${elStyle} :options="${column.varName}Options" :props="{ expandTrigger: 'hover' }"></el-cascader><#rt>
  <#elseif (column.formElementType!'') == "23"><#-- 自动完成 -->
          <#lt><el-autocomplete v-model="${table.beanName}.${column.varName}" :fetch-suggestions="query${column.propName}Items" ${elStyle} class="inline-input" /><#rt>
  <#elseif column.isDate || (column.formElementType!'') == "11"><#-- DATE -->
          <#lt><dayu-date-picker v-model="${table.beanName}.${column.varName}" ${elStyle} /><#rt>
  <#elseif column.isDateTime || (column.formElementType!'') == "12"><#-- DATE_TIME -->
           <#lt><dayu-date-time-picker v-model="${table.beanName}.${column.varName}" /><#rt>
  <#elseif column.javaType == 'Integer' || column.javaType == 'Long' || (column.formElementType!'') == "3"><#-- INTEGER_INPUT 整型数 --> <#-- 把特殊类型放在前面处理，最后才根据dataType处理 -->
          <#lt><dayu-integer-input v-model="${table.beanName}.${column.varName}" ${elStyle} <#if (column.minValue!0) gt 0 >:min="${column.minValue}"</#if><#if (column.maxValue!0) gt 0>:max="${column.maxValue}"</#if> > <#rt>
          <#lt><#if (column.unit!'')?length gt 0 ><template #suffix>${column.unit}</template></#if></dayu-integer-input><#rt>
  <#elseif column.javaType == 'BigDecimal' || (column.formElementType!'') == "4"><#-- FLOAT_INPUT 浮点数 -->
          <#lt><dayu-number-input v-model="${table.beanName}.${column.varName}" ${elStyle} <#if (column.minValue!0) gt 0>:min="${column.minValue}"</#if><#if (column.maxValue!0) gt 0>:max="${column.maxValue}"</#if> ><#rt>  
          <#lt><#if (column.unit!'')?length gt 0 ><template #suffix>${column.unit}</template></#if></dayu-number-input><#rt>
  <#else><#-- TEXT_INPUT 单行文本框 -->
          <#lt><el-input v-model="${table.beanName}.${column.varName}" <#if (column.charsetType!'') == 'en'>:show-word-limit="true"</#if> ${elStyle}/><#rt>
  </#if>
        <#lt></el-form-item></el-col>

  <#if colIndex gte 2><#-- 判断 row是否需要关闭。 目前只支持两列，打到两列就结束这一行-->
      </el-row>
        <#assign rowOpen=false>
  </#if>
</#list>
<#if rowOpen==true><#-- a-row标签还未结束 -->
      </el-row>
</#if>
    </el-form>

  <#if (table.attachmentType!'') == '2'><#-- 多个图片 -->
    <ImagesUpload bizType='${table.className}' :bizId='id'></ImagesUpload>
  <#elseif (table.attachmentType!'') == '3'><#-- 多个普通文件 -->
    <FilesUpload bizType='${table.className}' :bizId='id'></FilesUpload>
  </#if>

  </div>
</template>

<script lang="ts" setup>
/*
 * @author: ${author}
 * @date: ${nowTime}
 * @template: dayu-code-builder
*/
import { ref, reactive, computed, onMounted } from 'vue'
import { ${table.className}, ${table.beanName}Service } from '@/api/${sysName}/${table.className}Service'
import { IForm, formColGutter } from '@/common/FormModal'
import { myutil, EntityBO } from '@/common/dayu-common'
<#if (table.attachmentType!'') == '2'><#-- 多个图片 -->
import ImagesUpload from '@/components/ImagesUpload.vue'
<#elseif (table.attachmentType!'') == '3'><#-- 多个普通文件 -->
import FilesUpload from '@/components/FilesUpload.vue'
</#if>

const props = defineProps({
  id: Number,
<#if foreignColumn??>
  ${foreignColumn.varName}: Number,
  ${foreignColumn.varNameTrimId}Name: String,
</#if>
<#if parentColumn??>
  ${parentColumn.varName}: ${parentColumn.jsType},  
  ${parentColumn.varNameTrimId}Name: String,
</#if>
});


/** form两列之间的间距 */
const formGutter = formColGutter;
<#if formColumnCount == 1>
const elWidth1 = '360px';
<#else>
const elWidth1 = '270px';
</#if>
/** 接口数据（和接口返回数据对应） */
const ${table.beanName}Data = reactive({${table.beanName}:<${table.className}>{}, codeTypes:{}, nameTypes:{}});
/** 表单数据 */
const ${table.beanName} = computed(() => ${table.beanName}Data.${table.beanName});

/** 下拉列表数据 */
<#list formFields as column>
<#if (column.codeType!'')?length gt 0>
const ${column.varName}Items = computed(() => myutil.codeItems2ElOptions(${table.beanName}Data.codeTypes["${column.varName}"]));
</#if>
</#list>

/** 表单验证 */
const rules = {
<#list formFields as column>
<#if column.required == true>
  ${column.varName}: [{ required: true, message: '${column.columnCaption}是必填项', trigger: 'blur' }],
</#if>
</#list>
}
/** 用于记录Form表单的原始数据。在提交数据时进行对比，如果没有发生变化，则不执行实际的提交。 */
let originFormData = '';

/** 表单vue组件对象 */
const ${table.beanName}Form = ref();

/** 获取表单数据 */
async function getFormData() {
  try {
    let response: any = await ${table.beanName}Service.get${table.className}BO(props.id as number);
    let ${table.beanName}BO = response.data as EntityBO;
    ${table.beanName}Data.${table.beanName} = ${table.beanName}BO.data || {};
    ${table.beanName}Data.codeTypes = ${table.beanName}BO.codeTypes;
    ${table.beanName}Data.nameTypes = ${table.beanName}BO.nameTypes;
  } catch (ex: any) {
    console.error("await error");
    console.error(ex);
  }
}

/** 提交表单数据（这个函数是给引用表单的组件调用的，函数名是固定的，不能修改） */
async function submitFormData() {//函数名固定为submitFormData，FormModal.submit内会按此函数名执行调用
  let ${table.beanName} = ${table.beanName}Data.${table.beanName};
<#if foreignColumn?? || parentColumn??>
  if(!${table.beanName}.${table.idVarName}){
    <#if foreignColumn??>
    if(!${table.beanName}.${foreignColumn.varName} && props.${foreignTable.beanName}Id){
      ${table.beanName}.${foreignColumn.varName} = props.${foreignTable.beanName}Id;////新增的数据，需要设置外键
    }
    </#if>
    <#if parentColumn??>
    if(!${table.beanName}.${parentColumn.varName} && props.${parentColumn.varName}){
      ${table.beanName}.${parentColumn.varName} = props.${parentColumn.varName};////新增的数据，需要设置父id
    }
    </#if>
  }
</#if>
  
  let newFormData = JSON.stringify(${table.beanName});

  //和表单原始数据时进行对比，如果没有发生变化，则不执行实际的提交。
  if (originFormData === newFormData) {
    console.log("数据没有改动，无需保存，操作已取消");
    return Promise.resolve();
  }
  try {
    await ${table.beanName}Form.value.validate(); //表单验证
  } catch {
    return Promise.reject('validateError');//表单验证出错
  }
  try {
    let response = await ${table.beanName}Service.save${table.className}(${table.beanName}); //提交数据到后端服务进行保存
    return Promise.resolve(response);
  } catch (err: any) {
    return Promise.reject(err);//表单验证出错
  }
}

onMounted(() => {
  getFormData();
});

defineExpose({ submitFormData } as IForm);

</script>

<style scoped>
</style>